import React, { Component } from 'react';
import { Input, message } from 'antd';
import axios from './../../axios';
import './index.less';

class Folder extends Component {
	
	state = {
		inputValue: "新建文件夹",
		view_mode: "list",//列表页面新建还是矩阵页面新建
	}
	
	componentDidMount(){
		const view_mode = localStorage.getItem("jqmkj_whole_view_mode");
		if(view_mode){
			this.setState({view_mode});
		}
		//输入框设置选中状态
		this.fileInput.select();
	}
	
	//输入框变化
	inputChange = (e) => {
		this.setState({
			inputValue: e.target.value
		})
	}
	
	//回车新建文件夹
	createFolder = (e) => {
		if(e.keyCode === 13){
			this.createDirSubmit();
		}
	}
	
	//输入框失去焦点新建文件夹
	createFolder2 = () => {
		this.createDirSubmit();
	}
	
	//新建文件夹提交
	createDirSubmit = () => {
		axios.ajax({
			url: "/files/file/createDir", 
			method: "post",
			data: {
				pid: this.props.pid,
				name: this.state.inputValue
			},
		}).then(res=>{
			if(res.code === 0 && res.msg){
				message.success("创建成功");
				this.props.createFolder(true);
			}else{
				//创建失败的情况
				this.props.createFolder(false);
			}
		}).catch(err=>{
			//创建失败的情况
			this.props.createFolder(false);
		})
	}
	
	render(){
		const isList = (this.state.view_mode === "list");
		const xwidth = {width: "80px"}
		const xnull = {}
		return (
			<li className={isList ? "file-line-box" : "file-line-box-thumb"}>
				<svg
					className="icon icon-createfolder"
					aria-hidden="true"
				>
				    <use xlinkHref="#icon-folder"></use>
				</svg>
				<Input
					style={isList?xwidth:xnull }
					ref={(input)=>{this.fileInput = input}}
					value={this.state.inputValue}
					onChange={this.inputChange}
					onBlur={this.createFolder2}
					onKeyUp={(e)=>this.createFolder(e)}
				/>
			</li>
		)
	}
}

export default Folder;